<template>
    <div class="dashboard">
        <!-- 左侧控制面板 -->
        <LeftControlPanel :statistics="statistics" @start-add-row="handleStartAddRow" @clear-all="handleClearAll" />

        <!-- 3D视图 -->
        <div class="center-view">
            <DataCenter3DRenderer @cabinet-selected="handleCabinetSelected" @device-selected="handleDeviceSelected" />
        </div>

        <!-- 右侧属性面板 -->
        <RightPropertiesPanel :selected-cabinet="selectedCabinet as any" :selected-device="selectedDevice as any"
            @deselect-cabinet="handleDeselectCabinet" @deselect-device="handleDeselectDevice"
            @delete-cabinet="handleDeleteCabinet" @delete-device="handleDeleteDevice" />
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useDataCenterStore } from '@/stores/datacenter'
import { CabinetType } from '@/stores/datacenter'
import LeftControlPanel from './LeftControlPanel.vue'
import DataCenter3DRenderer from './DataCenter3DRenderer.vue'
import RightPropertiesPanel from './RightPropertiesPanel.vue'
import type { Cabinet, Device } from '@/stores/datacenter'

const dataCenterStore = useDataCenterStore()

// 统计信息
const statistics = computed(() => ({
    rowCount: dataCenterStore.rows.length,
    cabinetCount: dataCenterStore.rows.reduce((sum, row) => sum + row.cabinets.length, 0),
    deviceCount: dataCenterStore.rows.reduce((sum, row) =>
        sum + row.cabinets.reduce((cabinetSum, cabinet) => cabinetSum + cabinet.devices.length, 0), 0)
}))

// 选中状态
const selectedCabinetId = ref<string | null>(null)
const selectedDeviceId = ref<string | null>(null)
const selectedDeviceCabinetId = ref<string | null>(null)

// 计算选中的机柜对象
const selectedCabinet = computed(() => {
    if (!selectedCabinetId.value) return null

    for (const row of dataCenterStore.rows) {
        const cabinet = row.cabinets.find(cab => cab.id === selectedCabinetId.value)
        if (cabinet) return cabinet
    }
    return null
})

// 计算选中的设备对象
const selectedDevice = computed(() => {
    if (!selectedDeviceId.value || !selectedDeviceCabinetId.value) return null

    for (const row of dataCenterStore.rows) {
        const cabinet = row.cabinets.find(cab => cab.id === selectedDeviceCabinetId.value)
        if (cabinet) {
            return cabinet.devices.find(device => device.id === selectedDeviceId.value) || null
        }
    }
    return null
})

// 事件处理函数
const handleAddRow = (rowData: any) => {
    dataCenterStore.addRow(rowData)
}

const handleStartAddRow = () => {
    // 添加一个默认的行
    dataCenterStore.addRow({
        name: `Row ${dataCenterStore.rows.length + 1}`,
        description: '默认行',
        position: { x: 0, y: 0, z: dataCenterStore.rows.length * 3000 }
    })
}

const handleClearAll = () => {
    dataCenterStore.clearAll()
    selectedCabinetId.value = null
    selectedDeviceId.value = null
    selectedDeviceCabinetId.value = null
}

const handleAddCabinet = (cabinetData: any) => {
    // 直接在行中添加机柜
    const row = dataCenterStore.rows.find(r => r.id === cabinetData.rowId)
    if (row) {
        row.addCabinet({
            name: cabinetData.name,
            description: cabinetData.description,
            type: cabinetData.type as CabinetType,
            width: cabinetData.width,
            color: cabinetData.color
        })
    }
}

const handleCabinetSelected = (cabinetId: string | null) => {
    selectedCabinetId.value = cabinetId
    // 清除设备选中状态
    selectedDeviceId.value = null
    selectedDeviceCabinetId.value = null
}

const handleDeviceSelected = (deviceId: string | null, cabinetId: string | null) => {
    selectedDeviceId.value = deviceId
    selectedDeviceCabinetId.value = cabinetId
    // 清除机柜选中状态
    selectedCabinetId.value = null
}

const handleDeselectCabinet = () => {
    selectedCabinetId.value = null
}

const handleDeselectDevice = () => {
    selectedDeviceId.value = null
    selectedDeviceCabinetId.value = null
}

const handleDeleteCabinet = (cabinetId: string) => {
    // 找到机柜所在的行并删除
    for (const row of dataCenterStore.rows) {
        const cabinetIndex = row.cabinets.findIndex(cab => cab.id === cabinetId)
        if (cabinetIndex > -1) {
            row.cabinets.splice(cabinetIndex, 1)
            selectedCabinetId.value = null
            break
        }
    }
}

const handleDeleteDevice = (deviceId: string, cabinetId: string) => {
    // 找到设备所在的机柜并删除
    for (const row of dataCenterStore.rows) {
        const cabinet = row.cabinets.find(cab => cab.id === cabinetId)
        if (cabinet) {
            cabinet.removeDevice(deviceId)
            selectedDeviceId.value = null
            selectedDeviceCabinetId.value = null
            break
        }
    }
}
</script>

<style scoped>
.dashboard {
    display: flex;
    height: 100vh;
    background: var(--color-background);
}

.center-view {
    flex: 1;
    position: relative;
}
</style>